<template>
  <div class="nopi">
    <!-- 3.使用组件标签
         每次使用 子组件标签，相当于 new VueComponent() 对象
     -->
    <!-- <dog01 dogName="小班班"></dog01>
    <dog01 dogName="小长长" /> -->

    <!-- 
    <dog01
      v-for="(dog, i) in dogList"
      :key="i"
      :dogName="dog"
      @onPassNum="getNum"
    ></dog01> -->

    <hr />
    <div class="box2">
      <Monkey></Monkey>
      <hr />
      <dog01 />
    </div>
    <hr />
    <!-- <MyCat></MyCat> -->
    <!-- <my-cat /> -->
  </div>
</template>

<script>
// 1.导入组件
import Dog from "./mycomp/Dog.vue";
import MyCat from "./mycomp/Cat.vue";
import Monkey from "./mycomp/Monkey.vue";

export default {
  // 2.注册组件
  components: {
    dog01: Dog,
    // MyCat: MyCat,
    MyCat,
    // 注意：不要使用 html标签名冲突
    // h1: MyCat,
    Monkey,
  },
  data() {
    return {
      dogList: ["花花", "ruiky", "大黄", "旺财"],
    };
  },
  methods: {
    getNum(num) {
      console.log("狗狗给主人传递的爱心数量：", num);
    },
  },
};
</script>

<style lang="less" scoped>
.box2 {
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}
</style>
